{% block sw_customer_base_info %}
<sw-container
    class="sw-customer-base-info"
    columns="repeat(auto-fit, minmax(250px, 1fr))"
    gap="0px 15px"
>
    {% block sw_customer_base_info_metadata %}
    {% block sw_customer_base_info_metadata_left %}
    <sw-loader v-if="isLoading" />

    <div
        v-else
        class="sw-customer-base-info-columns"
    >
        <template v-if="isBusinessAccountType && !customerEditMode">
            <sw-description-list>
                <dt class="sw-customer-base-info__label">
                    {{ $tc('sw-customer.baseInfo.labelCompany') }}
                </dt>

                <dd>
                    {{ customer.company }}
                </dd>
            </sw-description-list>

            <sw-description-list>
                <dt class="sw-customer-base-info__label">
                    {{ $tc('sw-customer.baseInfo.labelVatId') }}
                </dt>

                <dd>
                    {{ customer.vatIds[0] || '-' }}
                </dd>
            </sw-description-list>
        </template>

        {% block sw_customer_base_metadata_customer_group %}
        <sw-description-list>
            {% block sw_customer_base_metadata_customer_group_label %}
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelCustomerGroup') }}
            </dt>
            {% endblock %}

            {% block sw_customer_base_metadata_customer_group_content %}
            <dd v-if="!customerEditMode">
                {{ customer.group.translated.name }}
            </dd>
            {% endblock %}

            {% block sw_customer_base_metadata_customer_group_editor %}
            <dd v-else>
                <sw-entity-single-select
                    v-model:value="customer.groupId"
                    name="sw-field--customer-groupId"
                    entity="customer_group"
                    size="small"
                    show-clearable-button
                    :error="customerGroupIdError"
                />
            </dd>
            {% endblock %}
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_active %}
        <sw-description-list>
            {% block sw_customer_base_metadata_active_label %}
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelActive') }}
            </dt>
            {% endblock %}

            {% block sw_customer_base_metadata_active_content %}
            <dd
                v-if="!customerEditMode"
                class="sw-customer-base__label-is-active"
            >
                {{ $tc('sw-customer.baseInfo.contentActive', {}, customer.active ? 1 : 2) }}
            </dd>
            {% endblock %}

            {% block sw_customer_base_metadata_active_editor %}
            <dd v-else>
                <mt-checkbox
                    v-model:checked="customer.active"
                    name="sw-field--customer-active"
                    class="sw-customer-base-info__checkbox-field"
                    :label="$tc('sw-customer.baseInfo.contentActive')"
                    size="small"
                />
            </dd>
            {% endblock %}
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_confirmed %}
        <sw-description-list v-if="customer.doubleOptInRegistration">
            {% block sw_customer_base_metadata_confirmed_label %}
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelConfirmed') }}
            </dt>
            {% endblock %}

            {% block sw_customer_base_metadata_confirmed_content %}
            <dd
                v-if="!customerEditMode"
                class="sw-customer-base__label-is-confirmed"
            >
                {{ $tc('sw-customer.baseInfo.contentConfirmed', {}, customer.doubleOptInConfirmDate ? 1 : 2) }}
            </dd>
            {% endblock %}

            {% block sw_customer_base_metadata_confirmed_editor %}
            <dd v-else>
                <mt-checkbox
                    name="sw-field--customer-confirmed"
                    class="sw-customer-base-info__checkbox-field"
                    :checked="!!customer.doubleOptInConfirmDate"
                    :label="$tc('sw-customer.baseInfo.contentConfirmed')"
                    size="small"
                    @update:checked="customer.doubleOptInConfirmDate = $event ? new Date() : null"
                />
            </dd>
            {% endblock %}
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_language %}
        <sw-description-list>
            {% block sw_customer_base_metadata_language_label %}
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelLanguage') }}
            </dt>
            {% endblock %}

            {% block sw_customer_base_metadata_language_content %}
            <dd
                v-if="!customerEditMode"
                class="sw-customer-base__label-language"
            >
                {{ customerLanguageName }}
            </dd>
            {% endblock %}

            {% block sw_customer_base_metadata_language_editor %}
            <dd v-else>
                <sw-entity-single-select
                    v-model:value="customer.languageId"
                    name="sw-field--customer-languageId"
                    class="sw-customer-base-info__language-select"
                    entity="language"
                    :criteria="languageCriteria"
                    size="small"
                    show-clearable-button
                />
            </dd>
            {% endblock %}
        </sw-description-list>
        {% endblock %}

        {% block ssw_customer_base_metadata_affiliate %}
        <sw-description-list>
            <dt>{{ $tc('sw-customer.baseInfo.labelAffiliateCode') }}</dt>
            <dd v-if="!customerEditMode">
                {{ customer.affiliateCode || '-' }}
            </dd>
            <dd v-else>

                <mt-text-field
                    v-model="customer.affiliateCode"
                    name="sw-field--customer-customerAffiliateCode"
                    :placeholder="$tc('sw-customer.baseInfo.placeholderCustomerAffiliateCode')"
                    size="small"
                />
            </dd>
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_campaign %}
        <sw-description-list>
            <dt>{{ $tc('sw-customer.baseInfo.labelCampaignCode') }}</dt>
            <dd v-if="!customerEditMode">
                {{ customer.campaignCode || '-' }}
            </dd>
            <dd v-else>

                <mt-text-field
                    v-model="customer.campaignCode"
                    name="sw-field--customer-customerCampaignCode"
                    :placeholder="$tc('sw-customer.baseInfo.placeholderCustomerCampaignCode')"
                    size="small"
                />
            </dd>
        </sw-description-list>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_customer_base_info_metadata_right %}
    <div class="sw-customer-base-info-columns">
        {% block sw_customer_base_metadata_customer_number %}
        <sw-description-list>
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelCustomerNumber') }}
            </dt>
            <dd class="sw-customer-base__label-customer-number">
                {{ customer.customerNumber }}
            </dd>
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_bound_sales_channel %}
        <sw-description-list>
            {% block sw_customer_base_metadata_bound_sales_channel_label %}
            <dt class="sw-customer-base-info__label sw-bound-sales-channel__label">
                {{ $tc('sw-customer.baseInfo.labelBoundSalesChannel') }}
                <sw-help-text :text="$tc('sw-customer.baseInfo.helpTextBoundSalesChannel')" />
            </dt>
            {% endblock %}

            {% block sw_customer_base_metadata_bound_saleschannel_content %}
            <dd class="sw-customer-base__label-bound-sales-channel">
                <template v-if="customer.boundSalesChannelId">
                    {{ customer.boundSalesChannel.translated.name }}
                </template>
                <template v-else>
                    {{ $tc('sw-customer.baseInfo.emptyBoundSalesChannel') }}
                </template>
            </dd>
            {% endblock %}
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_last_login %}
        <sw-description-list>
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelLastLogin') }}
            </dt>
            <dd class="sw-customer-base__label-last-login">
                <template v-if="customer.lastLogin">
                    <sw-time-ago
                        :date="customer.lastLogin"
                        :date-time-format="{ month: '2-digit', day: '2-digit' }"
                    />
                </template>
                <template v-else>
                    {{ $tc('sw-customer.baseInfo.emptyTextLogin') }}
                </template>
            </dd>
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_turnover %}
        <sw-description-list>
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelTurnover') }}
            </dt>
            <dd class="sw-customer-base__label-turnover">
                {{ currencyFilter(customer.orderTotalAmount, currencyCode) }}
            </dd>
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_orders %}
        <sw-description-list>
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelOrders') }}
            </dt>
            <dd>{{ orderCount }}</dd>
        </sw-description-list>
        {% endblock %}

        {% block sw_customer_base_metadata_birthday %}
        <sw-description-list>
            {% block sw_customer_base_metadata_birthday_label %}
            <dt class="sw-customer-base-info__label">
                {{ $tc('sw-customer.baseInfo.labelBirthday') }}
            </dt>
            {% endblock %}

            {% block sw_customer_base_metadata_birthday_content %}
            <dd
                v-if="!customerEditMode"
                class="sw-customer-base__label-birthday"
            >
                <template v-if="customer.birthday">
                    {{ dateFilter(customer.birthday, { month: '2-digit', day: '2-digit', hour: undefined, minute: undefined }) }}
                </template>
                <template v-else>
                    {{ $tc('sw-customer.baseInfo.emptyTextBirthday') }}
                </template>
            </dd>
            {% endblock %}

            {% block sw_custoemr_base_metadata_birthday_editor %}
            <dd v-else>
                <mt-datepicker
                    v-model="customer.birthday"
                    name="sw-field--customer-birthday"
                    size="small"
                    date-type="date"
                    hide-hint
                    :placeholder="$tc('sw-datepicker.date.placeholder')"
                />
            </dd>
            {% endblock %}
        </sw-description-list>
        {% endblock %}
    </div>
    {% endblock %}
    {% endblock %}
</sw-container>
{% endblock %}
